<template>
	<view>
		<view class="crad-box" v-for="(item, index) in Cradlist" @click="sub_nav(item)">
			<view class="crad-product">
				<image :src="item.img" mode=""></image>
				<view class="crad-tiem">
					<u-icon size="14" color="#9fd180" name="clock"></u-icon>
					<view class="">
						即将开售
					</view>
					<view>{{newdata(item.open_time)}}</view>


				</view>

			</view>
			<view class="crad-item">
				<view class="title">
					<text>{{item.name}}</text>
					<!-- <u-icon 
					size="25" 
					name="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-698da70f-3b06-4c55-8457-df4a00210163/e7c3db64-056f-47c2-a995-e552dbe386fc.png"></u-icon> -->
				</view>
				<view class="crad-tip">
					<view class="tip-overall">
						{{item.tag_one}}
					</view>

					<view class="tip-half">
						<text class="tip-half-neo">限量</text>
						<text class="tip-half-two">{{item.num}}份</text>
					</view>
					<view class="tip-on">
						{{item.select_type == 1? '新春专题' : '普通专题'}}
					</view>
				</view>
				<view class="crad-pice">
					<view class="museum">
						<u--image
							src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-698da70f-3b06-4c55-8457-df4a00210163/5ee06386-7309-46f8-a0ec-062638309a99.png"
							shape="circle" radius="100rpx" width="30rpx" height="30rpx"></u--image>
						<view class="text">
							{{item.author}}
						</view>
					</view>

					<view class="pice">
						￥{{item.price}}
					</view>
				</view>
			</view>

		</view>
		<u-loadmore :status="status" height="100rpx" loadmoreText="-更多内容敬请期待-" />

	</view>

</template>

<script>
	export default {
		props: {
			Cradlist: { //参数名
				type: Array, //参数名

			}
		},
		computed: {
			newdata() {
				return function(e) {
					var newdate = Date.parse(new Date());
					let Rawtime = e + '000'
					
					Rawtime = parseInt(Rawtime)
					
					console.log(newdate)
					console.log(Rawtime)
					var time = new Date(parseInt(Rawtime));
					var y = time.getFullYear();
					var m = time.getMonth() + 1;
					var d = time.getDate();
					var h = time.getHours();
					var mm = time.getMinutes();
					var s = time.getSeconds();
					let date1 = y + '/' + this.add0(m) + '/' + this.add0(d) + ' ' + this.add0(h) + ':' + this.add0(
						mm) + ':' + this.add0(s);



					var date2 = new Date(); //结束时间
					var date3 = date2.getTime() - new Date(date1).getTime(); //时间差的毫秒数    
					//计算出相差天数
					var days = Math.floor(date3 / (24 * 3600 * 1000))

					//计算出小时数
					var leave1 = date3 % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
					var hours = Math.floor(leave1 / (3600 * 1000))
					//计算相差分钟数
					var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
					var minutes = Math.floor(leave2 / (60 * 1000))
					//计算相差秒数
					var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
					var seconds = Math.round(leave3 / 1000)
					console.log(" 相差 " + days + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒")
				}
			}
		},
		methods: {
			add0(m) {
				return m < 10 ? '0' + m : m
			},
			sub_nav(e) {
				uni.navigateTo({
					url: '/pages/mall/shop_details/shop_details?id=' + e.id
				})
			}
		}
	}
</script>

<style>
	.crad-box {
		background-color: #2b2c2e;
		width: 90%;
		margin: 0rpx auto;
		margin-top: 44rpx;
		border-radius: 80rpx;
		padding-bottom: 20rpx;
	}

	.crad-tiem {
		background-color: #252928;
		/* background-color: #2979FF; */
		width: 200rpx;
		height: 40rpx;
		line-height: 40rpx;
		position: absolute;
		top: 50rpx;
		left: 40rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: space-between;
		font-size: 18rpx;
		padding: 0rpx 10rpx;
		color: #9fd180;
	}

	.crad-item {
		padding: 0rpx 40rpx;
	}

	.crad-product {
		height: 680rpx;
		position: relative;
	}

	.crad-product image {

		width: 100%;
		height: 100%;
		border-radius: 80rpx;
	}

	.title {
		font-size: 28rpx;
		font-weight: 600;
		display: flex;
		margin-top: 20rpx;
		height: 50rpx;
		line-height: 50rpx;
	}

	.title text {
		margin-right: 10rpx;
	}

	.crad-tip {
		display: flex;
		margin-top: 20rpx;
	}

	.tip-overall {
		height: 40rpx;
		background-color: #f3e0bc;
		color: #2B2C2E;
		font-size: 22rpx;
		font-weight: 600;
		line-height: 40rpx;
		padding: 0rpx 10rpx;
		border-radius: 5rpx;
		margin-right: 10rpx;
	}

	.tip-half {
		height: 40rpx;
		background-color: #f3e0bc;
		font-size: 22rpx;
		line-height: 40rpx;
		border-radius: 5rpx;

	}

	.tip-half-neo {
		background-color: #f3e0bc;
		height: 40rpx;
		color: #2B2C2E;
		font-size: 22rpx;
		font-weight: 600;
		line-height: 40rpx;
		padding: 0rpx 10rpx;


	}

	.tip-half-two {
		background-color: #4b4b4b;
		color: #dcd8bd;
		font-size: 22rpx;
		line-height: 40rpx;
		height: 40rpx;
		padding: 6rpx 10rpx;
	}

	.tip-on {
		margin-left: 10rpx;
		background-color: #4b4b4b;
		color: #dcd8bd;
		font-size: 22rpx;
		line-height: 40rpx;
		height: 40rpx;
		padding: 0rpx 10rpx;
		border-radius: 5rpx;
	}

	.crad-pice {
		/* margin: 20rpx 0rpx; */
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		color: #949597;
		height: 80rpx;
		align-items: center;
	}

	.crad-pice .text {
		margin-left: 20rpx;
		font-size: 24rpx;
		font-weight: 600;
		margin-top: 4rpx;
	}

	.museum {
		display: flex;
	}

	.crad-pice .pice {
		font-size: 42rpx;
		font-weight: 600;
		color: #ffffff;
		margin-right: 40rpx;
	}
</style>
